<template>
  <h1 style="font-size:40px;">员工管理</h1>
  <el-button type="info" @click="outLogin">退出登录</el-button>
  <!-- 添加按钮 -->
  <el-button type="primary" @click="centerDialogVisible = true">+</el-button>



  <!-- 消息提示 -->
  <template>
    <el-button :plain="true" @click="open2">success</el-button>
    <el-button :plain="true" @click="open3">warning</el-button>
    <el-button :plain="true" @click="open1">message</el-button>
    <el-button :plain="true" @click="open4">error</el-button>
  </template>


  <!-- 模态框  -->

  <el-button type="primary" @click="centerDialogVisible = true">
    +添加
  </el-button>


  <!-- 加数据 -->
  <el-dialog class="model" v-model="centerDialogVisible" title="添加员工" width="60%" height="600px" align-center>
    <!-- 加个表单 -->
    <h4>名称1</h4><el-input v-model="userName" placeholder="Please userName" />
    <h4>密码2</h4><el-input v-model="password" placeholder="Please password" />
    <h4>名字3</h4><el-input v-model="realName" placeholder="Please realName" />
    <h4>上传图片地址4</h4><el-input v-model="avatar" placeholder="Please Img avatar" />
    <h4>填写数据5</h4><el-input v-model="station" placeholder="Please station" />
    <h4>名字6</h4><el-input v-model="nickName" placeholder="Please nickName" />
    <h4>性别7</h4><el-input v-model="gender" placeholder="Please gender" />
    <h4>性别</h4><el-radio-group v-model="gender" class="ml-4">
      <el-radio label="男" size="large">男</el-radio>
      <el-radio label="女" size="large">女</el-radio>
    </el-radio-group>

    <!-- 底部确认取消 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addList">
          确定添加
        </el-button>
      </span>
    </template>

  </el-dialog>
    <!-- 改数据 -->
  <el-dialog class="model" v-model="PutDialogVisible" title="修改信息" width="60%" height="600px" align-center>
    <!-- 加个表单 -->
    <h4>名称1</h4><el-input v-model="userName" placeholder="Please userName" />
    <h4>密码2</h4><el-input v-model="password" placeholder="Please password" />
    <h4>名字3</h4><el-input v-model="realName" placeholder="Please realName" />
    <h4>上传图片地址4</h4><el-input v-model="avatar" placeholder="Please Img avatar" />
    <h4>填写数据5</h4><el-input v-model="station" placeholder="Please station" />
    <h4>名字6</h4><el-input v-model="nickName" placeholder="Please nickName" />
    <h4>性别7</h4><el-input v-model="gender" placeholder="Please gender" />
    <h4>性别</h4><el-radio-group v-model="gender" class="ml-4">
      <el-radio label="男" size="large">男</el-radio>
      <el-radio label="女" size="large">女</el-radio>
    </el-radio-group>

    <!-- 底部确认取消 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="PutDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="putDataID">
          确定修改
        </el-button>
      </span>
    </template>

  </el-dialog>


  <!-- <el-main class="Main"> -->
  <!-- 模态框 -->
  <!-- <template>
  
  <el-dialog v-model="dialogTableVisible" title="Shipping address">
    <el-table :data="gridData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>

</template> -->




  <!-- "id": "a08388dd-db16-47dd-aee7-e70c50d5317b",
        "userName": "221",
        "password": "21",
        "realName": "王雨",
        "gender": "male",
        "station": "技工",
        "avatar": "",
        "nickName": "",
        "createdAt": "2024-01-17T07:14:42.192Z",
        "updatedAt": "2024-01-17T07:14:42.192Z" -->

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="序号" width="100" type="index" />
    <el-table-column prop="realName" label="用户名" width="160" />
    <el-table-column prop="password" label="密码" width="160" />
    <el-table-column prop="station" label="名字" width="160" />
    <el-table-column prop="gender" label="性别" width="160" />
    <el-table-column prop="avatar" label="头像" width="160">
      <template #default="scope">
        <img :src="scope.row.avatar" alt="" width="100" height="100" />
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope" class="mb-4">
        <!-- scope.$index 索引 -->
        <!-- scope.row 当前行的数据 -->

        <el-button link type="danger" bg="true" size="small" @click="handleClick(scope.row)">删除</el-button>
        <el-button link type="danger" bg="true" size="small" @click="PutList(scope.row)" >修改</el-button>

      </template>
    </el-table-column>
  </el-table>

  <!-- 删除消息弹出 -->
  <!-- <template>
  <el-button text @click="open">确定删除此项吗?</el-button>
</template> -->


  <!-- </el-main> -->
</template>
<script  setup>
import { ref, reactive } from 'vue';
import { ww } from '../api/axiosEE.js';
import { ElMessage, ElMessageBox, } from 'element-plus'
const centerDialogVisible = ref(false); //开关模态框
const PutDialogVisible =ref(false);
// const dataAA= ref({
//   userName:'',
//   password:'',
//   realName:'',
//   station:'',
//   nickName:'',
//   avatar:`https://picsum.photos/200/300?${Math.random().toFixed(2)*100}`,
//   gender:'男'
// })
const userName = ref('');
const password = ref('');
const realName = ref('');
const station = ref('');
const nickName = ref('');
const avatar = ref(`https://picsum.photos/200/300?${Math.random().toFixed(2) * 100}`);
const gender = ref('男');

// 当前员工ID
const putListID = ref('') ;


// console.log(dataAA.value);

// 接口模版
// ww({
//       url,
//       method,
//       params,
//   })


// 接收列表数据
const tableData = ref([]);

// 请求数据
const getData = () => {

    if(!localStorage.getItem('token')){
      ElMessage({
        message:'身份错误',
        type: 'error',
      })
      setTimeout(()=>{
        location.href = '/';
      },1000)
    }


  ww({
    url: '/api/v1/admin/users',
    method: 'get',
    params: {
      page: 1,
      per: 10
    }
  })
    .then(res => {
      console.log(res);
      console.log(res.data.data)
      if (res.status == '200') {
        console.log('获取成功');
        console.log(res.data.data.list);

        tableData.value = res.data.data.list;

        return res.data.data.list;
      } else {
        console.log('失败,可能没登录');
      }
    })
}
getData();

// ELE插件 删除
const handleClick = (row) => {
  console.log(row);
  console.log(row.id);
  ww({ url: '/api/v1/admin/users/' + row.id, method: 'delete' }).then(req => {
    console.log(req);
    console.log('删除');
    getData();
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
  },)
  console.log('click')
  // 删除完成重新渲染
}


// 添加数据
const addList = () => {


  //   if (!dataAA.userName || !dataAA.realName || !dataAA.password) {

  //     console.log(dataAA.userName.value);
  //     console.log(dataAA.realName.value);
  //     console.log(dataAA.password.value);

  //  ElMessage({
  //  message: '请填写必要信息',
  //  type: 'error',
  //  });
  //  return;
  //  }
  console.log(userName);
  console.log(userName.value);


  ww({
    url: '/api/v1/admin/users',
    method: 'post',
    data: {
      "userName": userName.value,
      "password": password.value,
      "realName": realName.value,
      "avatar": avatar.value,
      "station": station.value,
      "nickName": nickName.value,
      "gender": gender.value,
    }
  }).then(req => {
    console.log(req);
    if (req.data.success) {
      ElMessage({
        message: req.data.data,
        type: 'success',
      })
      centerDialogVisible.value = false;
      //刷新数据
      getData();
      userName.value = '';
      password.value = '';
      realName.value = '';
      avatar.value = '';
      station.value = '';
      nickName.value = '';
      gender.value = '';

    } else {
      // 两种写法都可以
      // ElMessage.error(req.data.errorMessage)
      ElMessage({
        message: req.data.errorMessage,
        type: 'error',
      })
    }
  })
}

//修改数据
const PutList = (row)=>{
  PutDialogVisible.value=true
  console.log(row.id);

  putListID.value = row.id;
  console.log('/api/v1/admin/users/');

// 获取数据 模态框
   ww({
    url: '/api/v1/admin/users/'+row.id,
    method: 'get',
  }).then(req=>{
    console.log(req.data.data);
    let data =req.data.data;

userName.value=data.userName;
password.value=data.password;
realName.value=data.realName;
avatar.value=data.avatar;
station.value=data.station;
nickName.value=data.nickName;
gender.value=data.gender;
  });
}
  //修改数据

const putDataID = ()=>{
    console.log(putListID.value);
  ww({
    url: '/api/v1/admin/users/'+putListID.value,
    method: 'patch',
    data:{
// "userName":userName.value,
// "password":password.value,
// "realName":realName.value,
// "avatar":avatar.value,
// "station":station.value,
// "nickName":nickName.value,
// "gender":gender.value,

"userName":userName.value,
"password":password.value,
"realName":realName.value,
"gender":gender.value,
"avatar":avatar.value,
"station":station.value,
"nickName":nickName.value,
    },
  }).then(req=>{
    console.log(req.data);
    if(req.data.success){

      ElMessage({
        message:'信息修改成功',
        type: 'success',
      })

// 清空数据
userName.value = '';
password.value = '';
realName.value = '';
avatar.value = '';
station.value = '';
nickName.value = '';
gender.value = '';



        setTimeout(()=>{
      PutDialogVisible.value=false;
      getData();//重新渲染
        },600)
    }else{
      ElMessage({
        message:'未知错误',
        type: 'error',
      })
    }
  })
}

// 退出登录

const outLogin = ()=>{
  localStorage.removeItem('token');

        ElMessage({
        message:'退出登录成功',
        type: 'success',
      })
      setTimeout(()=>{
        location.href = '/';
      },1000)
}

</script>